<template>
    <div class="donation-container">
        <div class="title">捐款途径</div>
        <div class="content">
            我们感谢您对流浪动物救助的支持，您的每一份捐款都将帮助无家可归的小动物们找到温暖的家。
            我们会对您的捐助做好记录, 并定期在网站上公布。
            以下是我们的捐款途径：
        </div>
        <div class="donation-input">
            <form class="donation-form" @submit.prevent="handleDonation">
                <div class="form-group">
                    <label for="amount">捐款金额</label>
                    <div class="amount-options">
                        <button 
                            type="button" 
                            class="amount-btn" 
                            :class="{ 'selected': selectedAmount === option }" 
                            v-for="option in amountOptions" 
                            :key="option" 
                            @click="selectAmount(option)"
                        >
                            {{ option }}元
                        </button>
                    </div>
                    <div class="custom-amount">
                        <input 
                            type="number" 
                            id="amount" 
                            v-model.number="customAmount" 
                            min="0" 
                            step="0.01"
                            placeholder="其他金额"
                            @focus="clearSelectedAmount"
                        >
                    </div>
                </div>
                <div class="form-group">
                    <label for="note">备注</label>
                    <textarea 
                        id="note" 
                        v-model="note" 
                        rows="4" 
                        placeholder="请输入您的捐款留言"
                    ></textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="submit-btn">确认捐款</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import {useUserStore} from "@/stores/user"
import {postPetDonationAPI} from "@/api/pet"

const userStore=useUserStore()
const user_id = userStore.user.user_id;

// 定义捐款值的类型：只能为数字/null
const selectedAmount = ref<number | null>(null);
const customAmount = ref<number | null>(null);

const note = ref('');

const amountOptions = [10, 50, 100, 200, 500];

const selectAmount = (amount: number) => {
    selectedAmount.value = amount;
    customAmount.value = null; // 清除自定义金额
};

const clearSelectedAmount = () => {
    selectedAmount.value = null; // 输入自定义金额时清除选中状态
};

const handleDonation = async() => {
    const amount = selectedAmount.value || customAmount.value;
    
    if (!amount || amount <= 0) {
        ElMessage('请选择或输入有效的捐款金额')
        return;
    }

    const donationData = {
        amount: amount,
        note: note.value,
        user_id: user_id
    };

    // console.log("捐款数据：",donationData)

    // 调用捐款接口
    const res=await postPetDonationAPI(donationData)
    if(res.message === "成功"){
        ElMessage.success('捐款成功，感觉您的捐助！')
    }
    
    // 重置表单
    selectedAmount.value = null;
    customAmount.value = null;
    note.value = '';
};
</script>

<style scoped lang="scss">
.donation-container {
    width: 1200px;
    max-width: 100%;
    height: auto;
    margin: 50px auto;
    padding: 30px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    
    @media (max-width: 768px) {
        padding: 20px;
        margin-top: 30px;
    }
}

.title {
    color: #055B5C;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

.content {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    
    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.donation-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.amount-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    
    @media (max-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.amount-btn {
    padding: 12px;
    border: 2px solid #055B5C;
    background-color: white;
    color: #055B5C;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover, &.selected {
        background-color: #055B5C;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
        transform: translateY(0);
    }
}

.custom-amount input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    
    &:focus {
        outline: none;
        border-color: #055B5C;
        box-shadow: 0 0 0 2px rgba(5, 91, 92, 0.2);
    }
}

textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    resize: none;
    box-sizing: border-box;
    
    &:focus {
        outline: none;
        border-color: #055B5C;
        box-shadow: 0 0 0 2px rgba(5, 91, 92, 0.2);
    }
}

.submit-btn {
    padding: 15px;
    background-color: #055B5C;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
        background-color: #034242;
        transform: translateY(-2px);
    }
    
    &:active {
        transform: translateY(0);
    }
}
</style>    